import PropTypes from "prop-types";
import React, {Component} from "react";

import Filter from 'bad-words';
import classnames from 'classnames';
import DisplayMap from "../map/DisplayMap";
// import LocationTypeAhead from "../map/LocationTypeAhead";

const defaultLocation = { // 默认位置 及 提交时发送的位置
  lat: 23.174778281742533, // 竖
  lng: 113.28594928140097, // 横
  name: '广州市'
}
class CreatePost extends Component{
  static propTypes = {
    onSubmit: PropTypes.func.isRequired,
    location: PropTypes.shape({
      lat: PropTypes.number.isRequired,
      lng: PropTypes.number.isRequired,
      name: PropTypes.number.isRequired,
    }),
    user: PropTypes.object,
  };
  constructor(props) {
    super(props);
    this.state = {
      content: "",
      valid: false,
      showLocationPicker: false, // 显示位置选择器
      location: props.location || null,
      locationSelected: false, // 位置已选择
    };
    this.filter = new Filter();

    this.handlePostChange = this.handlePostChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleRemoveLocation = this.handleRemoveLocation.bind(this); // 已经确定位置了，但是要修改位置，故是要移除位置
    this.handleToggleLocation = this.handleToggleLocation.bind(this);
    this.onLocationSelect = this.onLocationSelect.bind(this);
    this.onLocationUpdate = this.onLocationUpdate.bind(this);
  };
  handleSubmit(){
    if (!this.state.valid)
      return;
    const newPost = {
      content: this.state.content,
    };
    if (this.state.locationSelected){
      newPost.location = {
        lng: this.state.location.lat,
        lat: this.state.location.lng,
        name: this.state.location.name,
      }
      // newPost.location = this.state.location;
    }
    if (this.props.user.id === null){
      alert(`当前用户登陆异常${this.props.user.name}，请重新发布文章`);
      return;
    }
    newPost.userId = this.props.user.id;

    this.props.onSubmit(newPost);
    this.setState(() => ({
      content: "",
      valid: false,
    }))
  }

  handleRemoveLocation(){
    if (window.confirm('确定要重新选择位置吗?',false)){
      this.setState(() => ({
        locationSelected: false,
        location: defaultLocation,
        showLocationPicker: true,
      }))
    }
  }
  handleToggleLocation(e){
    e.preventDefault();
    this.setState(state => ({
      showLocationPicker: !state.showLocationPicker,
    }))
  }
  handlePostChange(e){
    const content = this.filter.clean(e.target.value);
    this.setState(() => {
      return {
        content,
        valid: content.length <= 280,
      }
    })
  }
  onLocationSelect(location){
    this.setState(() => ({
      location,
      showLocationPicker: false,
      locationSelected: true,
    }));
  }
  onLocationUpdate(location){
    this.setState(() => ({location}))
  }


  renderLocationControls(){
    return (
        <div className="controls">
          <button onClick={this.handleSubmit}>发布</button>
          {this.state.location && this.state.locationSelected ? (
              <button onClick={this.handleRemoveLocation} className="open location-indicator">
                <i className="fa-location-arrow fa" />
                <small>{this.state.location.name}</small>
              </button>
          ) : (
              <button onClick={this.handleToggleLocation} className="open">
                {this.state.showLocationPicker ? "取消" : "添加位置"}{" "}
                <i
                  className={classnames(`fa`,{
                    "fa-map-o" : !this.state.showLocationPicker,
                    "fa-times" : this.state.showLocationPicker,
                  })}
                />
              </button>
          )}
        </div>
    )
  }

  render() {
    return (
        <div className="create-post">
          <textarea
            value={this.state.content}
            onChange={this.handlePostChange}
            placeholder="想什么有趣的事情呢？"
          />
          {this.renderLocationControls()}
          <div
            className="location-picker"
            style={{ display: this.state.showLocationPicker ? "block" : "none" }}
          >

            {this.state.showLocationPicker && // 是否显示 位置显示器
            <DisplayMap
              key="DisplayMap"
              displayOnly
              // location={defaultLocation}
              onLocationSelect={this.onLocationSelect}
              // onLocationUpdate={this.onLocationUpdate}
            />
            }
          </div>

        </div>

    )
  }
}

export default CreatePost;
